<template>
	<!-- 地址簿列表 -->
	<layout title="地址簿" background="#fff">
		<tohome />
		<!-- <navbar :navigationBarStyle="navigationBarStyle"></navbar> -->
		<view class="screen" style="height: 100vh;">
			<view style="padding: 25rpx 30rpx;">
				<u-search v-model="keywords" @custom="search" @search="search" :clearabled="true" :showAction="true">
				</u-search>
			</view>
			<view>

				<uni-swipe-action>
					<!-- 使用插槽 （请自行给定插槽内容宽度）-->
					<template v-for="(item, index) in dataList">
						<uni-swipe-action-item>
							<view style="padding: 0 30rpx;" @click="selectOk($event, index)">
								<view class="swipe-item">
									<view class="swipe-left">
										<view class="swipe-left-text1">
											<text class="vertical_bottom">{{item.name}}</text>
											<text class="vertical_bottom swipe-left-text1_txt2">{{item.mobile}}</text>
										</view>
										<view class="swipe-left-text2">
											<text>{{item.address}}</text>
										</view>
									</view>
									<view class="swipe-left">
										<image :src="getImgSrc('/address/icon_edit@2x.png')"
											style="width: 34rpx;height: 34rpx;" mode="widthFix"></image>
									</view>
								</view>
							</view>
							<template v-slot:right>
								<view class="swipe-rightBtn" @click="delHandle($event, index)">
									<image :src="getImgSrc('/address/icon_delete@2x.png')"
										style="width: 34rpx;height: 34rpx;" mode="widthFix"></image>
								</view>
							</template>
						</uni-swipe-action-item>
					</template>
				</uni-swipe-action>
			</view>
			<view class="screen-bottomFill" style="opacity: 1;" :style="'height:' + vuex_phoneLayout.ipxbottom + 'px;'">
				<!-- 用来填充导航 和 底部的多余 -->
			</view>
		</view>
	</layout>
</template>
<script>
	export default {
		data() {
			return {
				navigationBarStyle: {
					background: '',
					color: 'black',
					iconText: '地址薄' //导航栏文字
				},
				dataList: [],
				keywords: ""
			};
		},
		onLoad(option) {},
		onShow() {
			this.getData()
		},
		watch: {},
		methods: {
			search(e) {
				console.log(e)
			},
			selectOk(e, i) {

				var _this = this;
				let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。
				let prevPage = pages[pages.length - 2];
				prevPage.myAddress = this.dataList[i];
				uni.navigateBack();
			},
			delHandle(e, i) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否确认删除',
					success: function(res) {
						console.log(res)
						if (res.confirm) {
							// that
							let pa = {
								id: that.dataList[i].id
							}
							that.$u.api.deleteAddress(pa).then(res => {
								that.$u.toast('删除成功');
								that.getData()
							})
						}
					}
				});
			},
			getData() {

				this.$u.api.getAddressList().then(res => {
					console.log(res)
					if (res.code == '200') {
						this.dataList = res.data
					} else {
						this.$u.toast(res.message);
					}
				});
			}

		}
	};
</script>
<style lang="scss">
	@import 'index.scss';

	.swipe-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 140rpx;
		border-bottom: 1rpx solid #EAEAEA;
	}

	.swipe-left-text1_txt2 {
		font-size: 24rpx;
		color: #B5B5B5;
		margin-left: 16rpx;
	}

	.swipe-left-text1 {
		font-size: 28rpx;
		color: #282828;
		margin: 19rpx 0 6rpx;
	}

	.swipe-rightBtn {
		width: 130rpx;
		height: 140rpx;
		background: #ED4C44;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
